<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon"  href="/img/蛋糕.svg" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
        *{
            margin: 0;
        }
        body{
            background-color: ghostwhite;
        }
        a{
            text-decoration:none
        }
        .tou{
            position: fixed;
            background: white;
            display: flex;
            width: 100%;
            align-items: center;
            height: 60px;
            z-index: 100;
        }
        .tab{
            width: 100%;
            background-color: white;
        }
        .img_1{
            width: 300px;
            height: 75px;
            margin: 10px 0 20px 100px;
        }
        .tab tr td{
            margin:  auto;
            text-align: center;
        }
        .tab_1 td input{
            margin-left: 10px;
        }
        .tab_1{
            height: 150px;
        }
        .tab_1 button{
            background: rgb(255, 255, 255);
            border: none;
            width: 50px;
            height: 50px;
        }
        .num{
            position: fixed;
            width: 100%;
            height: 61px;
            background-color: white;
            bottom: 0;
            z-index: 100;
            display: flex;
        }
        .num span{
            font-size: 30px;
            justify-content: center;
        }
        .num button{
            position: fixed;
            background: rgb(255, 227, 42);
            border: none;
            font-size: 20px;
            width: 100px;
            height: 61px;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="tou">
            <a href="cake2.html"><span style="font-size: 39px;color: gainsboro;margin-left: 10px;"><</span></a>
            <div><img src="./img/logo.png" width="326px" alt=""></div>
        </div>
        <div style="height: 66px;width: 1px;"></div>
    <table class="tab">
        <tr class="tab_1" v-for="(d,index) in gwc" :key="d.id">
            <td><input type="checkbox" v-model="deleteList" v-bind:value="d.id" name="ic" onclick="single_check()"></td>
            <td><img :src="getImgUrl(d.img)" width="100px"></td>
            <td><h3>{{d.name}}</h3></td>
            <td style="color: rgb(115, 115, 115);">{{d.kg}}</td>
            <td><h3>￥{{d.k.price}}</h3></td>
            <td><button @click="del(d,index)"><img src="./img/del.png" alt=""></button></td>
        </tr>
    </table>
    <div style="height: 66px;width: 1px;"></div>
    <div class="num">
        <span>合计:￥{{priceNum}}</span>                            
        <form action="http://127.0.0.1:1234/pay/alipay">
            <input type="hidden" :value="priceNum" name="price">
            <input type="hidden" :value="nameStr" name="name">
            <button type="submit" @click="btnDelete">去结算</button>
        </form>
    </div>
        <script type="text/javascript">
        function all_check() {
            var oInput = document.getElementsByName("ic");
            for (var i = 0; i < oInput.length; i++) {
                if (document.getElementById("all").checked == true) {
                    oInput[i].checked = true;
                } else {
                    oInput[i].checked = false;
                }
            }
        }

      function single_check() {
        var oInput = document.getElementsByName("ic");
        var j = 0;
        for (var i = 0; i < oInput.length; i++) {
          if (oInput[i].checked == true) {
            j = j + 1;
          }
        }

        if (j == oInput.length) {
          document.getElementById("all").checked = true;
        } else {
          document.getElementById("all").checked = false;
        }
      }

      //1.点击按钮加
      function add(btn){
        var obj = btn.nextElementSibling;
        var val = obj.value;
        val++;
        if(val>10){
            alert("商品数量不够！");
            return false;
        }else{
            obj.value=val;
        }
      }
      //2.点击按钮减
      function jian(btn){
        var obj = btn.previousElementSibling;
        var val = obj.value;
        val--;
        if(val < 1){
            alert("商品数量不能小于1！");
            return false;
        }else{
            obj.value=val;
        }
      }

        const vm = new Vue({
            el: "#app",
            data: {
                gwc:[],
                deleteList: [],
                d: {
                    name:"",
                    kg:"",
                    k:{price:""}
                },
                priceNum: 0,
                nameStr:""
            },

            mounted() {
                this.StuN();
                },

            methods:{
                //叠加总计
                getPriceNum() {
                    console.log(this.gwc.length)
                    console.log(this.gwc)
                    for (let index = 0; index < this.gwc.length; index++) {
                        this.priceNum = this.priceNum += Number(this.gwc[index].price)
                        console.log(this.gwc[index].price)
                    }
                    console.log(this.priceNum)
                },
                getName() {
                    for (let index = 0; index < this.gwc.length; index++) {
                        this.nameStr = this.nameStr += this.gwc[index].name + ","
                        console.log(this.gwc[index].name)
                    }
                    console.log(this.nameStr)
                },

                /**显示*/
                StuN() {
                    axios
                        .post("http://127.0.0.1:1234/Gwc/spper", this.d)
                        .then((response) => {
                            this.gwc = response.data;
                            console.log(this.d);
                            this.getPriceNum();
                            this.getName();
                    });
                },

                      //删除
                      del(d, index) {
                    console.log(d, index);
                    axios.delete(`http://127.0.0.1:1234/Gwc/${d.id}`)
                        .then(response => {
                            if (response.data === 1) {
                                vm.gwc.splice(index, 1);
                            }
                        }).catch(err => {
                        alert(err);
                    })
            },
                        //批量删除
                        btnDelete() {
                            console.log(this.deleteList);
                                axios.delete("http://127.0.0.1:1234/Gwc/Btndelete?ids=" + this.deleteList)
                                    .then(response => {
                                    let resData = response.data;
                                    console.log(resData);
                                    this.deleteList = [];
                                    this.gwc = [];
                                    this.StuN();
                                })
                        },

            getImgUrl(name){
                return "/image/"+name
            },
        },


        })
        </script>
</body>

</html>